<template>
  <div class="thePage">
    <div id="myMap" ref="myMap" class="myMap" v-loading="loading" element-loading-text="区域轮廓绘制中..." element-loading-background="rgba(9, 35, 109, 1)">
    </div>
    <!-- 信息窗口弹框 -->
    <popup ref="infoWindow" :curProject="curProject" :showPopup="showPopup" />
  </div>

</template>

<script>
import * as echarts from 'echarts';

// import top from './components/top.vue';

import { getPorjectInfoAll } from '@/views/cockpit/api/bigscream';
import { getBottomDataApi } from '@/views/cockpit/api/map';
import { debounce } from '@/utils/index.js';
export default {
  name: 'myMap',
  components: {
    popup:()=>import("./components/popup.vue"),
  },
  data() {
    return {
      loading: false,
      chart: null,
      currIndex: 0,
      timeInterval: null,
      limitCenter: [],
      isMove: false,
      moveTimer: null,

      options: {},

      iconCategory: {
      				1: require('@/views/cockpit/assets/category1.png'),
      				2: require('@/views/cockpit/assets/category2.png'),
      },
      curProject:{
        shortName: '项目简称1',
        amount:10000,
        allFinish:5000,
        //项目其他信息
      },
      showPopup: false, //显示信息窗口弹框
    };
  },

  computed: {},
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
    this.currIndex = 0;
    clearInterval(this.timeInterval);
    this.timeInterval = null;
  },
  methods: {
    initChart() {
      this.loading = true;
      // 初始化echart
      this.chart = echarts.init(this.$refs.myMap);

      echarts.registerMap('myMap', { geoJSON: require('./map.json') });
      this.initOptions();
      this.chart.setOption(this.options, true);

      // 鼠标点转地理坐标,测试用

      this.chart.getZr().on('click', params => {
        let pixelPoint = [params.offsetX, params.offsetY];
        let dataPoint = this.chart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
        console.log(dataPoint);
      });
      this.loading = false;
    },
    initOptions() {
      this.options = {
        tooltip: {},
        geo: {
          tooltip: {
            show: false,
            // confine: true,
            position: (point, params, dom, rect, size) => {
              //console.log(point,dom,size.viewSize,size.contentSize)
              // 获取可视区域的宽度和高度
              const viewWidth = size.viewSize[0] - 10;
              const viewHeight = size.viewSize[1] - 10;

              // 获取提示框内容的宽度和高度
              const tooltipWidth = 360; //dom.offsetWidth;
              const tooltipHeight = 240; //dom.offsetHeight;

              // 设置提示框的位置
              let left = point[0];
              let top = point[1];

              // 判断提示框是否超出可视范围，如果超出则调整位置
              if (left + tooltipWidth > viewWidth) {
                left = viewWidth - tooltipWidth;
              }
              if (top + tooltipHeight > viewHeight) {
                top = viewHeight - tooltipHeight;
              }
              return [left, top];
            },
            // backgroundColor: 'rgba(247, 65, 4, 0.0)',
            padding: 0,
            formatter: params => {
              // console.log(params);
              if (params.componentType === 'geo') {
                // this.onVillageDetail(this.listVillage.find(item => item.name === params.name));
                // return this.$refs.villageDetail.$el;
                return params.name + JSON.stringify(params);
              }
            }
          },
          map: 'myMap',
          selectedMode: 'single',
          roam: true,
          aspectScale: 1,
          scaleLimit: {
            max: 4,
            min: 0.5
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          label: {
            show: true,
            fontSize: 14,
            color: '#ddd',
            zIndex: 1000
          },
          itemStyle: {
            color: 'rgba(3,123,83,0.3)',
            borderColor: '#00ce7d',
            borderWidth: 2
          },
          emphasis: {
            // disabled:true,
            label: {
              color: '#fff',
              fontSize: 18
            },
            itemStyle: {
              color: 'rgba(3,123,83,1)',
              borderColor: '#00ce7d',
              borderWidth: 4
            }
          },
          select: {
            label: {
              show: true,
              color: '#ff0000',
              fontSize: 18
            },
            itemStyle: {
              areaColor: '#ffff00',
              borderColor: '#ff0000'
            }
          }
        },
        
        
        geo3D: {
          tooltip: {
            show: false,
            // confine: true,
            position: (point, params, dom, rect, size) => {
              //console.log(point,dom,size.viewSize,size.contentSize)
              // 获取可视区域的宽度和高度
              const viewWidth = size.viewSize[0] - 10;
              const viewHeight = size.viewSize[1] - 10;
        
              // 获取提示框内容的宽度和高度
              const tooltipWidth = 360; //dom.offsetWidth;
              const tooltipHeight = 240; //dom.offsetHeight;
        
              // 设置提示框的位置
              let left = point[0];
              let top = point[1];
        
              // 判断提示框是否超出可视范围，如果超出则调整位置
              if (left + tooltipWidth > viewWidth) {
                left = viewWidth - tooltipWidth;
              }
              if (top + tooltipHeight > viewHeight) {
                top = viewHeight - tooltipHeight;
              }
              return [left, top];
            },
            // backgroundColor: 'rgba(247, 65, 4, 0.0)',
            padding: 0,
            formatter: params => {
              // console.log(params);
              if (params.componentType === 'geo') {
                // this.onVillageDetail(this.listVillage.find(item => item.name === params.name));
                // return this.$refs.villageDetail.$el;
                return params.name + JSON.stringify(params);
              }
            }
          },
          map: 'myMap',
          selectedMode: 'single',
          roam: true,
          aspectScale: 1,
          scaleLimit: {
            max: 4,
            min: 0.5
          },
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          label: {
            show: true,
            fontSize: 14,
            color: '#ddd',
            zIndex: 1000
          },
          itemStyle: {
            color: 'rgba(3,123,83,0.3)',
            borderColor: '#00ce7d',
            borderWidth: 2
          },
          emphasis: {
            // disabled:true,
            label: {
              color: '#fff',
              fontSize: 18
            },
            itemStyle: {
              color: 'rgba(3,123,83,1)',
              borderColor: '#00ce7d',
              borderWidth: 4
            }
          },
          select: {
            label: {
              show: true,
              color: '#ff0000',
              fontSize: 18
            },
            itemStyle: {
              areaColor: '#ffff00',
              borderColor: '#ff0000'
            }
          }
        },
        
        series: [
          {
            type: 'scatter',
            name: 'plant',
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: 36,
            symbol: value => {
              console.log(value)
              return 'image://' + this.iconCategory[value[2]];
            },
            data: [[112.14638186037236, 33.438435043882976, 1], [112.20662822207449, 32.75689807712766, 2]],
            selectedMode: 'single',
            select: {
              // disabled: false  //可以被选中
              label: {
                show: true
              }
            },
            label: {
              show: false, //默认不显示
              position: [30, 30], // 绝对的像素值
              backgroundColor: {
                // image: this.iconBackground
              },
              shadowColor: 'rgba(148, 148, 148, 0.4)',
              shadowOffsetX: 0,
              shadowOffsetY: 8,
              shadowBlur: 30,
              width: 120,
              height: 80,
              formatter: params => {
                return '测试散点图: ' + JSON.stringify(params);
              }
            },
            tooltip: {
              show: true,
              // position: ['50%', '50%'],
              padding: 0,
              formatter: params => {
                this.showInfoWindow(params);
                return this.$refs.infoWindow.$el;
              }
            },
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 1000,
            symbolSize: 20,
            showEffectOn: 'render', // emphasis 高亮（hover）的时候显示特效。render 绘制完成后显示特效。
            itemStyle: {
              color: '#7e1c00'
            },
            rippleEffect: {
              color: '#b02a02',
              number: 3, //波纹的数量 默认3
              period: 4 // 动画的周期，秒数。默认4
            },
            data: [[112.68483371808512, 33.0355375, 100], [112.67730292287236, 32.561097401595745, 30]],
            tooltip: {
              show: true,
              // position: ['50%', '50%'],
              padding: 0,
              formatter: params => {
                this.showInfoWindow(params);
                return this.$refs.infoWindow.$el;
              }
            },
          },

          {
            type: 'lines', //路径图
            coordinateSystem: 'geo',
            geoIndex: 0,
            selectedMode: 'single',
            polyline: true, // 是否是多段线。默认为 false
            zlevel: 101,
            data: [
              {
                coords: [
                  [111.54311693400685, 33.54738788184829],
                  [111.54311693400685, 33.45620527096792],
                  [111.55714502798844, 33.32995242513357],
                  [111.55714502798844, 33.32995242513357],
                  [111.61091938825122, 33.105502921428055],
                  [111.64598962320521, 32.9862641225845],
                  [111.64598962320521, 32.9862641225845],
                  [111.70444001479518, 32.80623691648737]
                ]
              }
            ],
            lineStyle: {
              // color: 'white',
              color:{
                type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#F5FF00' // 0% 处的颜色
                  }, {
                      offset: 1, color: '#00FF9D' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              },
              width: 8,
              join: 'round', // round miter
              cap: 'round' //线段末端的绘制方式 square round
            },
            emphasis: {
              lineStyle: {
                color: 'red',
                width: 12
              }
            },
            effect: {
              show: true,
              symbol:'arrow',
              symbolSize: 10,
              period: 6,
              trailLength: 0.5,
              color: '#1010ff',
              roundTrip:true,
            },
            tooltip: {
              show: true,
              // position: ['50%', '50%'],
              padding: 0,
              formatter: params => {
                this.showInfoWindow(params);
                return this.$refs.infoWindow.$el;
              }
            }
          }
        ]
      };
    },

    showInfoWindow(item) {
    			if (item) {
    				this.showPopup = true;
    				// this.curProjectId = item.id;
    			} else {
    				this.showPopup = false;
    			}
    		},
  }
};
</script>
<style lang="scss" scoped>
.thePage{
  width: 100%;
  height: 100%;
}
.myMap {
  width: 100%;
  height: 100%;
}
</style>
